<template>
  <div class="box1">
    <!-- +++++++++++++++++++++消息列表+++++++++++++++++++++++++++++++++++ -->
   
   <el-page-header @back="gozx" content="任务的标题">
</el-page-header>


    <div class="formbd1">
      <el-form ref="form" :model="sizeForm" label-width="100px" size="small">
        <el-form-item label="任务标题">
          <el-input v-model="sizeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="任务类型">
          <p>单人任务</p>
        </el-form-item>
        <el-form-item label="任务奖励">
          <el-input v-model="sizeForm.date1"></el-input>
        </el-form-item>
        <el-form-item label="任务截止时间">
          <el-input v-model="sizeForm.date2"></el-input>
        </el-form-item>
        <el-form-item label="任务级别">
          <el-input v-model="sizeForm.resource"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="formbd2">
      <el-form ref="form" :model="sizeForm" label-width="100px" size="small">
        <el-form-item label="任务描述">
          <el-input
            type="textarea"
            :rows="3"
            style="width: 600px"
            v-model="sizeForm.desc"
          ></el-input>
        </el-form-item>
        <el-form-item label="任务要求">
          <el-input
            type="textarea"
            :rows="3"
            style="width: 600px"
            v-model="sizeForm.desc1"
          ></el-input>
        </el-form-item>

        <div>
          <el-form-item class="btn3">
            <el-button type="primary" @click="dialogVisible = true"
              >接受任务</el-button
            >
          
           
            <!-- 111111111111111111111111111 -->
           <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
            >
              <span>个人单次只能接受一个任务，须在时限要求内提交任务交付物，超时未提交则自动判定任务失败，无法获得奖励！</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary"   @click="dialogVisible = false"
                  >接受任务</el-button
                >
              </span>
            </el-dialog>
            <!-- 111111111111111111111111111 -->
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- +++++++++++++++++++++上传++++++++++++++++++++++++++++++++++++ -->
    <div class="update1">
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
       
      </el-upload>
    </div>
    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
  </div>
</template>
<style>
.box1 {
  width: 1250px;
  height: 660px;
  background-color: white;
  /* padding-top: 50px; */
}
.head {
  float: left;
}
.formbd1 {
  width: 500px;
  /* border: red solid 1px; */
  position: absolute;
  top: 150px;
  /* margin-left: 30px; */
}
.formbd2 {
  width: 1210px;
  /* border: red solid 1px; */
  position: absolute;
  top: 405px;
  /* margin-left: 30px; */
}
.btn3 {
  margin-top: 115px;
  /* margin-left: 5px; */
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.update1 {
  width: 350px;
  /* border: red 1px solid; */
  position: absolute;
  top: 550px;
  left: 320px;
}
</style>

<script scoped>
export default {
  data() {
    return {
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      dialogTableVisible: false,
      dialogVisible: false,
      dialogVisibletwo:false,
      
      dialogVisiblethree:false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      sizeForm: {
        name: "年后年后年后年后年后年后年后年后",
        //  radio: '1',
        // region: "三天",
        date1: "1,000",
        date2: "三天",
        // delivery: false,
        // type: [5],
        resource: "一般",
        desc: "年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年年后年后年后年后年年后年后年后年后年年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后",
        desc1:
          "年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年年后年后年后年后年年后年后年后年后年年后年后年后年后年年后年后年后年后年后年后年后年后年后年后年后年后年后",
      },
    };
  },
  methods: {
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    gozx() {
      this.$router.push("/Userrwgl");
    },
    open1() {
        this.$alert('您确定要放弃任务吗？', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message('您已成功放弃任务！');
          }
        });
        
      },
    
  },
};
</script>